<template>
  <div class="main">
    <div class="parent_box">
      <p v-for="(item, index) in 12">标题{{ index }}</p>
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import { useBottomLoading } from "@/hooks/bottomLoading";

export default {
  name: "Intersection",
  data() {
    return {}
  },
  mounted() {
    // 可视窗口元素
    const parentEl = document.querySelector('.parent_box')
    // 被监听元素
    const loadingEl = document.querySelector('.el-icon-loading')
    useBottomLoading(parentEl, loadingEl, { threshold: 0 }, () => {
      alert('触底了')
    })
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.parent_box {
  width: 300px;
  height: 400px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 8px;
  background: #6cceae;
  overflow-y: scroll;
  text-align: center;

  .el-icon-loading {
    font-size: 20px;
    text-align: center;
  }
}
</style>
